<template>
  <div class="content">
    <div class="logo">
      <img src="../assets/logo.webp" />
    </div>
    <div class="main">
      <div>请输入您的用户名</div>
      <input
        id="userName"
        type="text"
        placeholder="请输入内容"
        autocomplete="off"
        v-model="userName"
      />
    </div>
    <div class="btn">
      <button @click="join">加入群聊</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import http from "../../utils/http";

const router = useRouter();
const userName = ref("");

async function join() {
  if (!userName.value) {
    alert("请输入用户名");
    return;
  }
  let userInfo = {};
  let res = await http.get(`/user/getUser?userName=${userName.value}`);
  if (res.data) {
    userInfo = res.data;
  } else {
    let res = await http.post(`/user/add`, {
      userName: userName.value,
    });
    userInfo = res.data;
  }

  // 进入聊天页面
  router.push({ path: "/chat", query: userInfo });
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .logo {
    width: 100px;
    height: 100px;
    margin-top: 30%;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .main {
    width: 80%;
    margin-top: 20%;
    input {
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid #a18cd1;
      border-radius: 5px;
      width: 100%;
      margin-top: 10px;
    }
  }

  .btn {
    width: 80%;
    button {
      padding: 10px;
      border: none;
      border-radius: 5px;
      color: #ffffff;
      margin-top: 30px;
      width: 100%;
      background-image: linear-gradient(-90deg, #a18cd1 0%, #fbc2eb 100%);
    }
  }
}
</style>
